<script setup>
import {useRouter} from "vue-router";
import {ArrowDown, ArrowRight, Download} from "@element-plus/icons-vue";
import MyEcharts from "@/components/MyEcharts/index.vue"
import {formatDate} from "@/utils/index.js";
import FilePreView from "@/components/FilePreView/index.vue";
import useUserStore from "@/store/modules/user.js";
import {
  getActualOutPutListApi,
  getArchivesListApi,
  getCertificateListApi,
  getInternshipListApi,
  getStuDetailsApi
} from "@/api/school.js";
import UserBaseInfo2 from "@/components/UserBaseInfo2/index.vue";

const userStore = useUserStore()

const router = useRouter()

const showDia2 = ref(false)

const state = reactive({
  tableData2: [],
  tableData3: [],
  tableData4: [],
  tableData5: [],
  tableData6: [],
  studentInfo: {},
  curType: 1,
  queryParams: {
    pageNum: 1,
    pageSize: 4,
    stuId: '',
  },
  curItem:{}
})
const starts = reactive({
  a: 5,
  b: 2,
  c: 3,
  d: 4,
  e: 5,
  f: 3,
})
const showDia1 = ref(false)

const chartDataOptions = {
  // 提示框组件
  tooltip: {
    trigger: 'item'
  },
  // 图例
  legend: {
    // 隐藏
    show: false,
  },
  // 雷达图坐标系配置
  radar: {
    // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
    indicator: [
      {name: '智育', max: 100, color: '#152584'},
      {name: '服务实战', max: 100, color: '#152584'},
      {name: '专业技能证书', max: 100, color: '#152584'},
      {name: '警务化和体能', max: 100, color: '#152584'},
      {name: '学科竞赛', max: 100, color: '#152584'},
      {name: '科研成果', max: 100, color: '#152584'}
    ],
    // 雷达图的形状，可选值为 'polygon'（多边形）和 'circle'（圆形）
    shape: 'circle',
    // 雷达图的中心位置，支持百分比和像素值
    center: ['50%', '50%'],
    // 雷达图的半径，支持百分比和像素值
    radius: '70%'
  },
  // 系列列表，每个系列代表一组数据
  series: [
    {
      name: '用户能力对比',
      type: 'radar',
      data: [
        {
          value: [80, 70, 60, 75, 85, 80],
          name: '用户 A'
        },
      ]
    }
  ]
};

const handleBack = () => {
  router.go(-1)
}

const handleDetails = (item) => {
  state.curItem = item
  if (item.acFileType === 'document') {
    const src = import.meta.env.VITE_APP_BASE_API + item.acFile
    window.open(src)
  } else {
    showDia1.value = true
  }
}

const getStuDetails = async (id) => {
  const res = await getStuDetailsApi({id})
  if (res.code == 200) {
    state.studentInfo = res.data
  }
}

const getDataList2 = async () => {
  const res = await getActualOutPutListApi(state.queryParams)
  if (res.code == 200) {
    state.tableData2 = res.rows
    state.total = res.total
  }
}

const getDataList3 = async () => {
  const res = await getInternshipListApi(state.queryParams)
  if (res.code == 200) {
    state.tableData3 = res.rows
    state.total = res.total
  }
}

const getDataList4 = async () => {
  const data = {
    ...state.queryParams,
    learningType:1
  }
  const res = await getArchivesListApi(data)
  if (res.code == 200) {
    state.tableData4 = res.rows
    state.total = res.total
  }
}

const getDataList5 = async () => {
  const res = await getCertificateListApi(state.queryParams)
  if (res.code == 200) {
    state.tableData5 = res.rows
    state.total = res.total
  }
}

const getDataList6 = async () => {
  const data = {
    ...state.queryParams,
    learningType:3
  }
  const res = await getArchivesListApi(data)
  if (res.code == 200) {
    state.tableData6 = res.rows
    state.total = res.total
  }
}

const getDataList = () => {

  if (state.curType === 2) {
    getDataList2()
  } else if (state.curType === 3) {
    getDataList3()
  } else if(state.curType === 4){
    getDataList4()
  }else if(state.curType === 5){
    getDataList5()
  }else if(state.curType === 6){
    getDataList6()
  }
}

const clearTable = () => {
  state.tableData = []
  state.total = 0
  state.queryParams.pageNum = 1
  state.queryParams.pageSize = 4
}

const handleType = (index) => {
  clearTable()

  if (state.curType === index) {
    state.curType = 0
    return
  }
  state.curType = index
  getDataList()
}

const handleDetails2 = (row) => {
  router.push({
    path: '/employmentNavigation/internship/details',
    query: {
      stuId: state.queryParams.stuId,
      id: row.id
    }
  })
}

const handleDetails5 = (item) => {
  state.curItem = item
  if (item.acFileType === 'document') {
    const src = import.meta.env.VITE_APP_BASE_API + item.acFile
    window.open(src)
  } else {
    showDia2.value = true
  }
}

onMounted(() => {
  const stuId = userStore.stuId
  state.queryParams.stuId = stuId
  getStuDetails(stuId)

})

</script>

<template>
  <div class="outBox">
    <el-card>
      <div class="header">
        <div class="tit">我的档案</div>
        <div class="btns">
          <!--          <el-button type="primary">-->
          <!--            <el-icon>-->
          <!--              <Download/>-->
          <!--            </el-icon>-->
          <!--            <span>导出</span>-->
          <!--          </el-button>-->
          <!--          <el-button type="primary">生成我的简历</el-button>-->
        </div>
      </div>
      <div class="form-box">
        <UserBaseInfo2 :student-info="state.studentInfo"/>
        <div class="form-lines">
          <div class="form-lineItem">
            <div class="top" @click="handleType(1)">
              <div class="form-name">综合素质</div>
              <div class="right-text">
                <!--                <span>93</span>-->
                <el-icon>
                  <ArrowRight v-if="state.curType !== 1"/>
                  <ArrowDown v-else/>
                </el-icon>
              </div>
            </div>
            <div class="cont" v-if="state.curType === 1">
              <div class="echart-box">
                <div class="echart-cont">
                  <MyEcharts :chart-data-options="chartDataOptions"/>
                </div>
                <div class="start-items">
                  <div class="start-item">
                    <div class="name">智育</div>
                    <div class="starts">
                      <el-rate v-model="starts.a" size="large" disabled/>
                    </div>
                  </div>
                  <div class="start-item">
                    <div class="name">学科竞赛</div>
                    <div class="starts">
                      <el-rate v-model="starts.b" size="large" disabled/>
                    </div>
                  </div>
                  <div class="start-item">
                    <div class="name">科研成果</div>
                    <div class="starts">
                      <el-rate v-model="starts.c" size="large" disabled/>
                    </div>
                  </div>
                  <div class="start-item">
                    <div class="name">警务化和体能</div>
                    <div class="starts">
                      <el-rate v-model="starts.d" size="large" disabled/>
                    </div>
                  </div>
                  <div class="start-item">
                    <div class="name">专业技能证书</div>
                    <div class="starts">
                      <el-rate v-model="starts.e" size="large" disabled/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
<!--          <div class="form-lineItem">-->
<!--            <div class="top" @click="handleType(2)">-->
<!--              <div class="form-name">实战展示</div>-->
<!--              <div class="right-text">-->
<!--                &lt;!&ndash;                <span>93</span>&ndash;&gt;-->
<!--                <el-icon>-->
<!--                  <ArrowRight v-if="state.curType !== 2"/>-->
<!--                  <ArrowDown v-else/>-->
<!--                </el-icon>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="text-items" v-if="state.curType === 2">-->
<!--              <div class="text-item" v-for="item in state.tableData2">-->
<!--                <div class="tit">{{ item.acTitle }}</div>-->
<!--                <div class="bottom">-->
<!--                  <div class="time">{{ formatDate(item.createTime) }}</div>-->
<!--                  <div class="check">-->
<!--                    <el-button type="primary" link @click="handleDetails(item)">查看详情</el-button>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="no-data" v-if="state.tableData2.length === 0">-->
<!--                <p>暂无数据</p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="form-lineItem">-->
<!--            <div class="top" @click="handleType(3)">-->
<!--              <div class="form-name">见习/实习经历</div>-->
<!--              <div class="right-text">-->
<!--                &lt;!&ndash;                <span>93</span>&ndash;&gt;-->
<!--                <el-icon>-->
<!--                  <ArrowRight v-if="state.curType !== 3"/>-->
<!--                  <ArrowDown v-else/>-->
<!--                </el-icon>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="text-items" v-if="state.curType === 3">-->
<!--              <div class="text-item" v-for="item in state.tableData3">-->
<!--                <div class="tit">{{ item.shipTitle }}</div>-->
<!--                <div class="bottom">-->
<!--                  <div class="time">{{ formatDate(item.createTime) }}</div>-->
<!--                  <div class="check">-->
<!--                    <el-button type="primary" link @click="handleDetails2(item)">查看详情</el-button>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="no-data" v-if="state.tableData3.length === 0">-->
<!--                <p>暂无数据</p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="form-lineItem">-->
<!--            <div class="top" @click="handleType(4)">-->
<!--              <div class="form-name">6211</div>-->
<!--              <div class="right-text">-->
<!--                &lt;!&ndash;                <span>93</span>&ndash;&gt;-->
<!--                <el-icon>-->
<!--                  <ArrowRight v-if="state.curType !== 4"/>-->
<!--                  <ArrowDown v-else/>-->
<!--                </el-icon>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="text-items2" v-if="state.curType === 4">-->
<!--              <TableRender v-for="item in state.tableData4" :json-data="item.jsonData"/>-->
<!--              <div class="no-data" v-if="state.tableData4.length === 0">-->
<!--                <p>暂无数据</p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="form-lineItem">-->
<!--            <div class="top" @click="handleType(5)">-->
<!--              <div class="form-name">证书展示</div>-->
<!--              <div class="right-text">-->
<!--                &lt;!&ndash;                <span>93</span>&ndash;&gt;-->
<!--                <el-icon>-->
<!--                  <ArrowRight v-if="state.curType !== 5"/>-->
<!--                  <ArrowDown v-else/>-->
<!--                </el-icon>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="text-items" v-if="state.curType === 5">-->
<!--              <div class="text-item" v-for="item in state.tableData5">-->
<!--                <div class="tit">{{ item.acTitle }}</div>-->
<!--                <div class="bottom">-->
<!--                  <div class="time">{{ formatDate(item.createTime) }}</div>-->
<!--                  <div class="check">-->
<!--                    <el-button type="primary" link @click="handleDetails5(item)">查看详情</el-button>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="no-data" v-if="state.tableData5.length === 0">-->
<!--                <p>暂无数据</p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="form-lineItem">-->
<!--            <div class="top" @click="handleType(6)">-->
<!--              <div class="form-name">智育成绩</div>-->
<!--              <div class="right-text">-->
<!--                &lt;!&ndash;                <span>93</span>&ndash;&gt;-->
<!--                <el-icon>-->
<!--                  <ArrowRight v-if="state.curType !== 6"/>-->
<!--                  <ArrowDown v-else/>-->
<!--                </el-icon>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="text-items2" v-if="state.curType === 6">-->
<!--              <TableRender v-for="item in state.tableData6" :json-data="item.jsonData"/>-->
<!--              <div class="no-data" v-if="state.tableData6.length === 0">-->
<!--                <p>暂无数据</p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
      <div class="pageBox">
        <pagination
            v-show="state.total > 0"
            :total="state.total"
            v-model:page="state.queryParams.pageNum"
            v-model:limit="state.queryParams.pageSize"
            @pagination="getDataList()"
            layout="'total, prev, pager, next, jumper'"
        />
      </div>
    </el-card>

    <el-dialog title="查看详情" v-model="showDia1" width="800" center>
      <el-form>
        <el-form-item label="成果名称：">
          <p class="form-text">{{ state.curItem.acTitle }}</p>
        </el-form-item>
        <el-form-item label="创建时间：">
          <p class="form-text">{{ formatDate(state.curItem.createTime) }}</p>
        </el-form-item>
        <el-form-item label="成果材料：">
        </el-form-item>
      </el-form>
      <div class="dia-cont">
        <FilePreView :url="state.curItem.acFile" width="500px" :fileType="state.curItem.acFileType"/>
      </div>

      <template #footer>
        <div class="dia-footer">
          <el-button @click="showDia1 = false">取消</el-button>
        </div>
      </template>
    </el-dialog>


    <el-dialog title="查看详情" v-model="showDia2" width="800" center>
      <el-form>
        <el-form-item label="证书名称：">
          <p class="form-text">{{state.curItem.acTitle}}</p>
        </el-form-item>
        <el-form-item label="创建时间：">
          <p class="form-text">{{formatDate(state.curItem.createTime)}}</p>
        </el-form-item>
        <el-form-item label="证书材料：">
        </el-form-item>
      </el-form>
      <div class="dia-cont">
        <FilePreView :url="state.curItem.acFile" width="500px"  :fileType="state.curItem.acFileType"/>
      </div>

      <template #footer>
        <div class="dia-footer">
          <el-button @click="showDia2 = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<style scoped lang="scss">
.text-items2{
  margin: 20px;
  :deep(table){
    margin-bottom: 20px;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.echart-box {
  display: flex;
  justify-content: space-between;

  :deep(.el-rate .el-rate__icon) {
    font-size: 30px;
  }

  :deep(.el-rate .el-rate__icon.is-active) {
    color: #152584;
  }

  .echart-cont {
    width: 40%;
  }

  .start-items {
    width: 50%;
    margin-bottom: 10px;

    .start-item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;

      .name {
        width: 130px;
      }
    }
  }
}

.form-lines {
  width: 100%;
  margin-top: 20px;
  border-left: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;

  .form-lineItem {
    .cont {
      padding: 20px;
    }

    .top {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e5e5e5;
      cursor: pointer;
    }

    .form-name {
      width: 150px;
    }

    .right-text {
      display: flex;
      align-items: center;

      span {
        color: #152584;
        margin-right: 20px;
      }
    }
  }
}

.text-items {
  padding: 20px;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(2, 550px);

  .text-item {
    margin-bottom: 20px;
  }

  .tit {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .bottom {
    display: flex;
    justify-content: space-between;

    .time {
      color: #827e7d;
    }
  }
}

.center-btns {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.form-textArea {
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;

  :deep(.el-textarea) {
    --el-input-border-color: #fff !important;
    --el-input-focus-border: #fff !important;
    --el-input-hover-border-color: #fff !important;
    --el-input-focus-border-color: #fff !important;

  }

  .form-name {
    width: 150px !important;
  }
}

.form-box {
  .form-name {
    background: #f1f7ff;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    font-weight: bold;
    border-right: 1px solid #e5e5e5;
  }

  .form-line {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;

    .form-item {
      display: flex;
      align-items: center;

      .form-cont {
        width: calc(100% - 100px);

        :deep(.el-input) {
          --el-input-border-color: #fff !important;
          --el-input-focus-border: #fff !important;
          --el-input-focus-border-color: #fff !important;
        }
      }
    }
  }
}
</style>
